<template>
	<div class="Word">
	  <div style="text-align: center; margin-top: 30px;">
		<h3>演示：批量打印文件</h3>
		<div style="width: 600px; margin: 0 auto; font-size: 14px;">
		  <p style="text-align: left;">
			演示内容：<br />
			&nbsp;&nbsp;&nbsp;&nbsp;本示例以Word为例，演示了批量打印文件的效果。选择文件后，点击“批量打印”按钮。
		  </p>
		</div>
  
		<hr />
		<ul class="company-list">
		  <li v-for="(item, index) in files" :key="index">
			<label>
			  <input name="company" :value="item.value" type="checkbox" v-model="selectedFiles" />
			  {{ item.name }}
			</label>
			<a href="#" @click.prevent="open_pageoffice('Preview', item.value)">预览</a>
		  </li>
		</ul>
  
		<input id="Button1" type="button" value="批量打印" :disabled="isButtonDisable" @click="PrintFiles()" /><br />
  
		<div id="progressDiv">
		  单文件进度：
		  <div class="progressBarContainer">
			<div ref="progressBar1" class="progressBar"></div>
		  </div>
		  整体进度：
		  <div class="progressBarContainer">
			<div ref="progressBar2" class="progressBar"></div>
		  </div>
		  <div id="errorMsg" ref="errorMsg"></div>
		</div>
	  </div>
	</div>
  </template>

<script>
import request from '@/utils/request'
import { filemakerctrl, POBrowser } from 'js-pageoffice'

export default {
  name: "Word",
  data() {
    return {
      files: [
        { value: '1', name: '荣誉证书' },
        { value: '2', name: '公司工作总结大会的通知' },
        { value: '3', name: '幻想科技销售合同' },
        { value: '4', name: '某某科技公司公文' }
      ],
      selectedFiles: [],
      titleText: '',
      isButtonDisable: false
    }
  },
  created: function () {
    return request({
      url: '/index',
      method: 'get',
    }).then(response => {
      this.titleText = response;
    });
  },
  methods: {
    PrintFiles() {
      if (this.selectedFiles.length === 0) {
        alert('请至少选择一个文件');
        return;
      }
      this.isButtonDisable = true;
      this.PrintFile(this.selectedFiles, 0);
    },
    PrintFile(idArr, index) {
      filemakerctrl.SetPrint(); // 打印
      filemakerctrl.CallFileMaker({
        url: "/FileMakerPrintFiles/filemaker?id=" + idArr[index],
        success: () => {
          console.log("completed successfully.");
          this.setProgress1(100);
          index++;
          this.setProgress2(index, idArr.length);
          if (index < idArr.length) {
            this.PrintFile(idArr, index);
          } else {
            this.isButtonDisable = false;
          }
        },
        progress: (pos) => {
          console.log("running " + pos + "%");
          this.setProgress1(pos);
        },
        error: (msg) => {
          this.isButtonDisable = false;
          this.$refs.errorMsg.innerHTML =
            "发生错误: " + msg;
          console.log("error occurred: " + msg);
        },
      });
    },
    setProgress1(percent) {
      const progressBar = this.$refs.progressBar1;
      progressBar.style.width = percent + "%";
      progressBar.innerText = percent + "%";
    },
    setProgress2(index, count) {
      const progressBar = this.$refs.progressBar2;
      progressBar.style.width = Math.round((index / count) * 100) + "%";
      progressBar.innerText = index + "/" + count;
    },
    open_pageoffice(vue_page_url, param) {
      POBrowser.openWindow(vue_page_url, 'width=1200px;height=800px;', param);
    }
  }
}
</script>

<style scoped>
.progressBarContainer {
  width: 100%;
  background-color: #eee;
  border-radius: 5px;
  padding: 3px;
  box-shadow: 2px 2px 3px 3px #ccc inset;
}

.progressBar {
  height: 20px;
  width: 0%;
  background-color: #1A73E8;
  border-radius: 5px;
  text-align: center;
  line-height: 20px;
  color: white;
}

#progressDiv {
  width: 400px;
  margin: 10px auto;
  text-align: left;
  font-size: 14px;
  border: solid 1px #1A73E8;
  padding: 10px 20px;
  color: #1A73E8;
}

#errorMsg {
  color: red;
}

.company-list {
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  width: 400px;
}

.company-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.company-list label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.company-list input[type="checkbox"] {
  margin-right: 5px;
}
</style>